<template >
  <div class="box">
    <div class="box_nav">
      <a href>热门</a>
      <a href>最新</a>
      <a href>热榜</a>
    </div>
    <!-- 列表开头广告 -->
    <div class="ad">
      <span class="ad_title">广告</span>
      <span>{{adContent.advertiser.title}}</span>
      <span>一天前</span>

      <p>{{adContent.title}}</p>
      <div class="ad_ab">{{adContent.abstract}}</div>
    </div>
    <div class="list">
      <ul>
        <li v-for="item in msg" :key="item.node.id">
          <div>
            <span style="color:#B71ED7">专栏</span>
            <span>{{item.node.user.username}}</span>
            <span>{{Interval}}前</span>
            <span>·&nbsp;&nbsp;{{item.node.tags[0].title}}</span>
          </div>
          <h3>
            <a href="item.node.screenshot">{{item.node.title}}</a>
          </h3>
          <span>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/zan.e9d7698.svg" alt />
          </span>
          <span>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/comment.4d5744f.svg" alt />
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["msg"],
  data() {
    return {
      // 父组件传过来的推荐文本
      // navTuijian: [],
      //文本列表开头广告
      adContent: [],
      // 发布时间
      adTime: "",
      //发布后已过时间
      Interval: ""
    };
  },
  computed: {},
  created() {},
  mounted() {
    // 获取列表开头广告数据
    axios({
      method: "post",
      url: "https://web-api.juejin.im/v3/web/wbbr/jmgijj",
      data: {
        variables: { platformCode: 1, positionCodes: [2, 3, 4, 5] },
        extensions: { query: { id: "85c0f781f40a7390dd7aedf0b1b35889" } }
      }
    }).then(res => {
      this.adContent = res.data.data.advertisementCard.items[0];
      this.adTime = res.data.data.advertisementCard.items[0].startedAt;

      // 已过时间
      let now = +new Date();
      let start = +new Date(this.adTime);
      let after = now - start;
      console.log(after);
      var middens = after / 1000; //秒
      var day = parseInt((middens / 60 / 60) % 24);
      var h = parseInt(middens / 60 / 60);
      if (h > 25) {
        this.Interval = day + "天";
      } else {
        this.Interval = h + "小时";
      }
    });
  },
  watch: {
    msg(val) {
      console.log(val);
    }
  },
  methods: {},
  components: {}
};
</script>

<style scoped lang='less'>
.box {
  width: 700px;
  margin: 10px 0 0 270px;
  background-color: #fff;
  padding: 15px;
  .list {
    ul {
      li {
        padding-top: 30px;
        h3 {
          margin: 10px 5px;
        }
      }
    }
  }
}
span {
  font-size: 13px;
  color: rgb(143, 143, 143);
  margin: 15px 5px;
}
.box_nav {
  margin: 15px 0;
}
li {
  list-style: none;
}
.ad {
  margin: 20px 120px 10px 0;
  .ad_title {
    font-size: 10px;
    padding: 4px;
    border: 0.5px solid rgb(206, 206, 206);
  }

  p {
    margin: 8px;
  }
  .ad_ab {
    font-size: 13px;
    color: rgb(143, 143, 143);
    margin: 15px 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>
